<template>
	<view class="newCustomerReduction">
		<view class="top">
			<view class="top_1">
				<view class="left">
					<image src="/static/img/index/61.png" mode="widthFix"></image>
					<input v-model="data.obj.productName" @confirm="data.obj.pageNo = 1,requstList()" type="text"
						placeholder="搜索商品" />
				</view>
				<text @tap="navTo('/pages/selectProduct/index')">选择商品</text>
			</view>
			<view class="topBar">
				<view class="left">
					<view :class="data.obj.joinFlag == 'Y'?'active':''"
						@tap="data.obj.joinFlag = 'Y',data.obj.pageNo = 1,requstList() ">
						已报名
					</view>
					<view :class="data.obj.joinFlag == 'N'?'active':''"
						@tap="data.obj.joinFlag = 'N',data.obj.pageNo = 1,requstList()  ">
						未报名
					</view>
				</view>
				<view class="right" v-if="data.obj.joinFlag == 'N'">
					已选<text>{{data.result.list.filter(item=>item.bool).length}}</text>个商品
				</view>
			</view>
		</view>
		<scroll-view :refresher-triggered="data.refresherBool" :refresher-enabled="true"
			@refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower" scroll-y="true">
			<view class="list">
				<view class="listItem" v-for="(item,index) in data.result.list" :key="index">
					<view class="top" @tap="item.bool = !item.bool">
						<view class="left_1">
							<view class="left">
								<text>免单购</text>
								<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item.fileId" mode="aspectFill">
								</image>
							</view>
							<view class="right">
								<text class="ellipsis_2">{{item.productName}}</text>
								<text class="ellipsis_1">{{item.skuNames}}</text>
								<view class="price">
									{{item.preferentialPrice.split('.')[0]}}.<text>{{item.preferentialPrice.split('.')[1]}}</text>
								</view>
							</view>
						</view>
						<image v-if="data.obj.joinFlag == 'N'"
							:src="item.bool?'/static/img/index/49.png':'/static/img/index/196.png'" mode="widthFix">
						</image>
					</view>
					<view class="bot" v-if="data.obj.joinFlag == 'Y'">
						<text @tap="deleteFee(item,index)">移除</text>
					</view>

				</view>
			</view>
		</scroll-view>
		<view class="bot" v-if="data.obj.joinFlag == 'N' && data.result.list.filter(item=>item.bool).length">
			<text @tap="handeCreate">确认创建</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue'
	import { pageFreeSpu, insertFreeSpu, deleteFreeSpu } from '@/utils/api/freeShipping'
	const data = reactive({
		obj: { pageSize: 10, pageNo: 1, productName: '', joinFlag: 'Y' },
		refresherBool: false,
		result: { list: [], total: 0 },
		httpUrl: getApp().globalData.baseUrl,
	})

	const navTo = (url : string) => {
		uni.navigateTo({
			url
		})
	}
	const refresherrefresh = () => {
		data.refresherBool = true;
		data.obj.pageNo = 1;
		requstList()
	}
	const deleteFee = (item, index) => {
		deleteFreeSpu({ data: { spuIds: [item.spuId] } }).then((res) => {
			if (res.code == 200) {
				uni.showToast({
					title: '移除成功',
					icon: 'none'
				})
				data.result.list.splice(index, 1)
			}
		})
	}
	const handeCreate = () => {
		insertFreeSpu({ data: { spuIds: data.result.list.filter(item => item.bool).map(item => item.spuId) } }).then((res) => {
			if (res.code == 200) {
				uni.showToast({
					title: '报名成功',
					icon: 'none'
				})
				for (var i = data.result.list.length - 1; i >= 0; i--) {
					if (data.result.list[i].bool) {
						data.result.list.splice(i, 1)
					}
				}
			}
		})
	}
	const requstList = () => {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		if (data.obj.pageNo == 1) {
			data.result.list = [];
		}
		pageFreeSpu({ data: data.obj }).then((res) => {
			res.data.list.map((item) => {
				if(item.hasPreferential.value != 'Y'){
					item.preferentialPrice = item.price;
				}
				item.preferentialPrice = item.preferentialPrice + '';
				if (item.preferentialPrice && item.preferentialPrice.indexOf('.') == -1) {
					item.preferentialPrice = item.preferentialPrice + '.00'
				}
			})
			res.data.list = [...data.result.list, ...res.data.list];
			data.result = res.data;
			data.refresherBool = false;
			uni.hideLoading()
		})
	}
	const scrolltolower = () => {
		if (data.result.total != data.result.list.length) {
			data.obj.pageNo += 1;
			requstList()
		}
	}
	requstList()
</script>

<style lang="scss">
	.newCustomerReduction {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #F4F6FA;

		>.top {
			background: #fff;
			padding: 37rpx 28rpx 0 28rpx;

			.top_1 {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					border-radius: 12rpx;
					display: flex;
					align-items: center;
					background-color: #F4F6FA;
					width: 508rpx;
					padding: 0 28rpx;

					input {
						height: 72rpx;
						flex: 1;
						margin-left: 10rpx;
					}

					image {
						width: 36rpx;
					}
				}

				>text {
					width: 160rpx;
					line-height: 72rpx;
					text-align: center;
					border-radius: 8rpx;
					border: 2rpx solid #F4F6FA;

				}
			}

			.topBar {
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;

					view {
						font-size: 32rpx;
						color: #8C8C8C;
						display: flex;
						flex-direction: column;
						align-items: center;

						&::after {
							content: '';
							display: inline-block;
							width: 48rpx;
							height: 8rpx;
							border-radius: 8rpx;
							margin-top: 12rpx;
						}
					}

					view:nth-of-type(1) {
						margin-right: 33rpx;
					}

					.active {
						color: #262626;
						font-size: 36rpx;

						&::after {
							background-color: #FF263F;
						}
					}
				}

				.right {
					display: flex;
					align-items: center;
					color: #595959;

					text {
						color: #FF5233;
						display: inline-block;
						margin: 0 10rpx;
					}
				}

			}
		}

		scroll-view {
			padding: 25rpx;
			flex: 1;
			overflow: auto;
		}

		>.bot {
			padding: 10rpx 56rpx 30rpx 56rpx;
			background: #fff;

			text {
				display: inline-block;
				width: 100%;
				line-height: 88rpx;
				background-color: #FF263F;
				border-radius: 44rpx;
				text-align: center;
				font-size: 32rpx;
				color: #fff;
			}
		}

		.list {
			>view:nth-of-type(1) {
				margin-top: 0;
			}

			.listItem {
				background-color: #fff;
				padding: 20rpx;
				border-radius: 16rpx;
				margin-top: 20rpx;

				.top {
					display: flex;
					align-items: center;

					>image {
						width: 36rpx;
						margin-left: 10rpx;
					}

					.left_1 {
						display: flex;
						align-items: center;
						flex: 1;

						.left {
							width: 180rpx;
							height: 180rpx;
							position: relative;
							border-radius: 24rpx;
							margin-right: 24rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 24rpx;
							}

							text {
								display: inline-block;
								width: 72rpx;
								line-height: 36rpx;
								text-align: center;
								border-radius: 24rpx 0 24rpx 0;
								background: linear-gradient(324deg, #FFBE88 0%, #FF743A 100%), linear-gradient(24deg, rgba(255, 130, 150, 0) 0%, #FF6A82 100%);
								color: #FFF6E4;
								font-family: 'MyFont1';
								font-size: 20rpx;
								position: absolute;
								left: 0;
								z-index: 9;
								top: 0;
							}
						}

						.right {
							flex: 1;
							width: 0;
							display: flex;
							flex-direction: column;

							>text:nth-of-type(1) {
								font-weight: bold;
							}

							>text:nth-of-type(2) {
								color: #8C8C8C;
								font-size: 24rpx;
								margin: 8rpx 0;
							}

							.price {
								color: #FF5233;
								font-size: 36rpx;

								&:before {
									content: '￥';
									font-size: 24rpx;
									color: #FF5233;
								}

								text {
									font-size: 24rpx;
									color: #FF5233;
								}
							}
						}
					}

				}

				.bot {
					display: flex;
					justify-content: flex-end;

					text {
						display: inline-block;
						width: 120rpx;
						line-height: 58rpx;
						text-align: center;
						color: #FF263F;
						background-color: #FFDED3;
						border-radius: 8rpx;
						margin-top: 30rpx;
					}
				}
			}
		}
	}
</style>